<template>
  <div class="patient-profile-container">
    <div class="profile-header">
      <h2><el-icon><User /></el-icon> 我的个人信息</h2>
    </div>

    <div class="profile-content">
      <!-- 基本信息卡片 -->
      <el-card class="profile-card">
        <div class="profile-basic">
          <div class="avatar-section">
            <el-avatar :size="120" :src="patientInfo.avatar" />
            <el-upload
                class="avatar-uploader"
                action="#"
                :show-file-list="false"
                :auto-upload="false"
                :on-change="handleAvatarChange"
            >
              <el-button type="primary" size="small" class="change-avatar-btn">
                <el-icon><Edit /></el-icon> 更换头像
              </el-button>
            </el-upload>
          </div>
          <div class="info-section">
            <h3>{{ patientInfo.name }}</h3>
            <div class="info-grid">
              <div class="info-item">
                <span class="label">性别：</span>
                <span class="value">{{ patientInfo.gender }}</span>
              </div>
              <div class="info-item">
                <span class="label">年龄：</span>
                <span class="value">{{ patientInfo.age }}岁</span>
              </div>
              <div class="info-item">
                <span class="label">手机号：</span>
                <span class="value">{{ patientInfo.phone }}</span>
              </div>
              <div class="info-item">
                <span class="label">身份证号：</span>
                <span class="value">{{ patientInfo.idCard }}</span>
              </div>
              <div class="info-item">
                <span class="label">注册时间：</span>
                <span class="value">{{ patientInfo.createTime }}</span>
              </div>
            </div>
          </div>
        </div>
      </el-card>

      <!-- 健康信息卡片 -->
      <el-card class="health-card">
        <template #header>
          <div class="card-header">
            <el-icon><Document /></el-icon>
            <span>健康档案</span>
          </div>
        </template>
        <div class="health-info">
          <div class="health-item">
            <span class="label">血型：</span>
            <span class="value">{{ healthInfo.bloodType || '未填写' }}</span>
          </div>
          <div class="health-item">
            <span class="label">过敏史：</span>
            <span class="value">{{ healthInfo.allergy || '无' }}</span>
          </div>
          <div class="health-item">
            <span class="label">慢性病史：</span>
            <span class="value">{{ healthInfo.chronicDisease || '无' }}</span>
          </div>
          <div class="health-item">
            <span class="label">家族病史：</span>
            <span class="value">{{ healthInfo.familyDisease || '无' }}</span>
          </div>
        </div>
        <div class="health-actions">
          <el-button type="primary" @click="showHealthEditDialog">
            <el-icon><Edit /></el-icon> 编辑健康信息
          </el-button>
        </div>
      </el-card>

      <!-- 编辑健康信息对话框 -->
      <el-dialog
          v-model="healthDialogVisible"
          title="编辑健康信息"
          width="600px"
          :close-on-click-modal="false"
      >
        <el-form
            ref="healthFormRef"
            :model="healthForm"
            label-width="120px"
        >
          <el-form-item label="血型">
            <el-select v-model="healthForm.bloodType" placeholder="请选择血型">
              <el-option label="A型" value="A型" />
              <el-option label="B型" value="B型" />
              <el-option label="AB型" value="AB型" />
              <el-option label="O型" value="O型" />
              <el-option label="其他" value="其他" />
            </el-select>
          </el-form-item>
          <el-form-item label="过敏史">
            <el-input
                v-model="healthForm.allergy"
                type="textarea"
                :rows="3"
                placeholder="请输入您的过敏史，如药物、食物等"
            />
          </el-form-item>
          <el-form-item label="慢性病史">
            <el-input
                v-model="healthForm.chronicDisease"
                type="textarea"
                :rows="3"
                placeholder="请输入您的慢性病史"
            />
          </el-form-item>
          <el-form-item label="家族病史">
            <el-input
                v-model="healthForm.familyDisease"
                type="textarea"
                :rows="3"
                placeholder="请输入您的家族病史"
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="healthDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitHealthForm">保存</el-button>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { User, Document, Edit } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

// 患者基本信息
const patientInfo = reactive({
  id: 10001,
  name: '张小明',
  gender: '男',
  age: 32,
  phone: '13800138000',
  idCard: '420102199001011234',
  avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
  createTime: '2022-05-15'
})

// 健康信息
const healthInfo = reactive({
  bloodType: 'A型',
  allergy: '青霉素过敏',
  chronicDisease: '无',
  familyDisease: '父亲有高血压病史'
})

// 健康表单
const healthForm = reactive({
  bloodType: '',
  allergy: '',
  chronicDisease: '',
  familyDisease: ''
})

// 对话框控制
const healthDialogVisible = ref(false)
const healthFormRef = ref(null)

// 初始化数据
onMounted(() => {
  Object.assign(healthForm, healthInfo)
})

// 更换头像
const handleAvatarChange = (file) => {
  const reader = new FileReader()
  reader.onload = (e) => {
    patientInfo.avatar = e.target.result
    ElMessage.success('头像更新成功')
  }
  reader.readAsDataURL(file.raw)
}

// 显示健康信息编辑对话框
const showHealthEditDialog = () => {
  Object.assign(healthForm, healthInfo)
  healthDialogVisible.value = true
}

// 提交健康信息表单
const submitHealthForm = async () => {
  try {
    Object.assign(healthInfo, healthForm)
    healthDialogVisible.value = false
    ElMessage.success('健康信息更新成功')
  } catch (error) {
    ElMessage.error('更新失败')
  }
}
</script>

<style scoped>
.patient-profile-container {
  padding: 20px;
  height: 100%;
}

.profile-header {
  margin-bottom: 20px;
}

.profile-header h2 {
  margin: 0;
  font-size: 20px;
  color: #333;
  display: flex;
  align-items: center;
  gap: 8px;
}

.profile-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.profile-card {
  margin-bottom: 20px;
}

.profile-basic {
  display: flex;
  gap: 30px;
}

.avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.change-avatar-btn {
  width: 120px;
}

.info-section h3 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 18px;
  color: #333;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.info-item {
  display: flex;
}

.label {
  color: #666;
  min-width: 80px;
}

.value {
  color: #333;
  font-weight: 500;
}

.health-card {
  margin-top: 20px;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
}

.health-info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.health-item {
  margin-bottom: 15px;
}

.health-actions {
  margin-top: 20px;
  text-align: center;
}

.avatar-uploader {
  display: inline-block;
}

@media (max-width: 768px) {
  .profile-basic {
    flex-direction: column;
    align-items: center;
  }

  .info-grid,
  .health-info {
    grid-template-columns: 1fr;
  }
}
</style>
